<template>
  <div class="split-box">
    <v-dialog title="物业拆分" :show.sync="dialogVisible" :closeOnClickModal="false" @beforeClose="beforeClose" width="1200px">
      <div style="padding: 5px">
        <el-steps :active="active" align-center>
          <el-step title="物业信息确认"></el-step>
          <el-step title="执行房间拆分"></el-step>
        </el-steps>
        <div class="resource-manage">
          <div class="card-box">
            <el-form v-show="active===0" class="form-wrap" size="small" label-position="top">
              <el-form-item label="物业名称">
                <el-col>{{sourceRoom.propertyName}}</el-col>
              </el-form-item>
              <el-form-item label="楼层">
                <el-col>{{sourceRoom.floor}}</el-col>
              </el-form-item>
              <el-form-item label="建筑面积(m²)" prop="dealDate">
                <el-col>{{sourceRoom.buildingArea}}</el-col>
              </el-form-item>
              <el-form-item label="备注" class="full">
                <el-col>{{sourceRoom.remarks}}</el-col>
              </el-form-item>
            </el-form>

            <div style="overflow: hidden">
              <el-button class="btn-pro" v-show="active===1" size="mini" type="text" plain @click="addRoom">新增</el-button>
            </div>
            <el-form v-show="active===1" :model="fromData" ref="fromData" class="form-wrap2 full" size="small">
              <el-table :data="fromData.roomInfo" align="center">
                <el-table-column label="序号" width="60" type="index"></el-table-column>
                <el-table-column label="物业名称">
                  <template slot-scope="scope">
                    <el-form-item :prop="'roomInfo.'+scope.$index+'.propertyName'" :rules="fromData.room_rules.propertyName">
                      {{baseRoomName}}-
                      <el-input
                        style="width: 100px"
                        onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                        maxlength="5"
                        v-model="scope.row.propertyName"
                        @blur="propertyNameOnly(scope)"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="建筑面积（产权）(m²)">
                  <template slot-scope="scope">
                    <el-form-item :prop="'roomInfo.'+scope.$index+'.buildingArea'" :rules="fromData.room_rules.buildingArea">
                      <el-input v-model="scope.row.buildingArea"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
								<el-table-column label="物业类型">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.projectType'"
																	:rules="fromData.room_rules.projectType">
											<el-select v-model="scope.row.projectType" @change="changeProjectType(scope.row)" placeholder="请选择物业类型">
												<el-option
													v-for="item in propertyTypes"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="物业用途">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.projectSubclassType'"
																	:rules="fromData.room_rules.projectSubclassType">
											<el-select v-model="scope.row.projectSubclassType" placeholder="请选择物业用途">
												<el-option
													v-for="item in filterSelectData(scope.row.projectType)"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>
                <el-table-column label="备注">
                  <template slot-scope="scope">
                    <el-form-item :prop="'roomInfo.'+scope.$index+'.remarks'" :rules="fromData.room_rules.remarks">
                      <el-input v-model="scope.row.remarks"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button size="small" type="text" @click="removeRoom(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </div>
        </div>

        <el-button style="margin-top: 12px;" class="btn-pro" v-show="active===1" @click="commit">完成</el-button>
        <el-button style="margin-top: 12px;" class="btn-pro" @click="cancel">取消</el-button>
        <el-button style="margin-top: 12px;" class="btn-pro" v-show="active===0" @click="next">下一步</el-button>
        <el-button style="margin-top: 12px;" class="btn-pro" v-show="active===1" @click="back">上一步</el-button>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import { doubleValidate } from '~/utils/validate.js'
import { validateFacRoomName } from "~/views/property-info-sys/project-manage/api/project_manage";
export default {
  name: "split-room",
  data () {
		let validatePropertyName = (rule, value, callback) => {
			if (!value) {
				callback()
			}
			this.validateOnly(value, callback)
		};
    return {
      dialogVisible: false,
      active: 0,
      baseRoomName: '',
      fromData: {
        room_rules: {
          propertyName: [
            { required: true, message: '请输入物业名称', trigger: 'blur' },
            { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" },
						{ validator: validatePropertyName, trigger: "blur" }
          ],
          buildingArea: [
            { required: true, message: '请填写建筑面积', trigger: 'blur' },
            { validator: doubleValidate, trigger: "change" }
          ],
					projectType: [
						{required: true, message: '请选择物业类型', trigger: 'blur'}
					],
					projectSubclassType: [
						{required: true, message: '请选择物业用途', trigger: 'blur'}
					],
          remarks: [{ min: 0, max: 200, message: "长度在0-200个字符串", trigger: "blur" },]
        },
        roomInfo: [],
      },
      sourceRoom: {},
			propertyTypes: [],
			useTypes: [],
			useTypesFilter: []
    }
  },
	mounted() {
		this.propertyTypes = this.getDict('property_types') //物业类型
		this.useTypes = this.getDict('property_use_types') //物业用途
	},
  methods: {
		changeProjectType(row) {
			row.projectSubclassType =""
		},
		filterSelectData(projectType){
			//重置物业用途
			let filterData = []
			if (projectType) {
				//过滤物业用途
				filterData = this.useTypes.filter(ut => ut.value.indexOf(projectType) == 0)
			}
			return filterData
		},
    beforeClose (done) {
      this.cancel()
      done()
    },
    next () {
      if (this.active++ > 1) this.active = 0;
    },
    back () {
      if (this.active-- < 0) this.active = 0;
    },
    cancel () {
      this.dialogVisible = false
    },
    commit () {
      let saveForm = this.fromData.roomInfo;
      if (saveForm == null || saveForm.length === 0) {
        this.$alert("拆分信息不能为空！")
        return false;
      }
      let buildingAreaTotal = this.sourceRoom.buildingArea;
      this.$refs['fromData'].validate((valid) => {
        if (valid) {
          //计算建筑面积总是否一致
          let spBuildingArea = saveForm.reduce((sum, cur) => Number(cur.buildingArea) + sum, 0)
          if (spBuildingArea !== buildingAreaTotal) {
            this.$alert("拆分后的房源建筑面积总和(" + spBuildingArea + ")不等于拆分前的房源建筑面积(" + buildingAreaTotal + ")！")
            return false;
          }
          let sd = {}
          sd['infos'] = saveForm
          sd['oldRoomId'] = this.sourceRoom.roomId
          this.$emit("doSplit", sd)
          this.cancel();
        }
      })

    },
    addRoom () {
      this.fromData.roomInfo.push({
        propertyName: '',
        buildingArea: '',
				projectSubclassType: this.sourceRoom.projectSubclassType,
				projectType: this.sourceRoom.projectType,
        remarks: ''
      })
    },
    removeRoom (index) {
      this.fromData.roomInfo.splice(index, 1)
    },
    //验证物业名称唯一
    propertyNameOnly (value) {
      if (this.fromData.roomInfo.length) {
        //    判断物业名称在集合中是否存在
        let filterName = this.fromData.roomInfo.filter(ri => {
          if (value.row.propertyName === ri.propertyName) {
            return ri
          }
        })
        if (filterName && filterName.length > 1) {
          this.$message.error("物业名称已存在，请重新输入！")
          this.fromData.roomInfo[value.$index].propertyName = ''
          return
        }
      }
      validateFacRoomName({ "roomName": this.baseRoomName + "-" + value.row.propertyName }).then(res => {
        if (res.data.data !== 0) {
          this.$message.error("物业名称已存在，请重新输入！")
          this.fromData.roomInfo[value.$index].propertyName = ''
        }
      })
    },
		validateOnly (value, callback) {
			validateFacRoomName({ "roomName": this.baseRoomName + "-" + value}).then(rep => {
				let vr = rep.data.data
				if (vr === 0) {
					return callback();
				} else {
					return callback(new Error("物业名称已存在，请重新输入！"));
				}
			})
		}
  }
}
</script>

<style scoped lang="scss">
@include formWrap(2);
.form-wrap2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 30px;
  padding: 16px 24px;
}
.split-box {
  overflow: hidden;
  .btn-pro {
    float: right;
    margin: 10px;
  }
}
</style>
